<template>
	<view class="headBox" :style="{height:navHeight+'rpx',backgroundColor:navBackgroundColor,...navStyle}">
		<view class="wx-head-mod" :style="{height:navHeight+'rpx'}">
			<view class="wx-head-mod-nav" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
				<view class="wx-head-mod-nav-content" :style="{height:customHeight+'rpx'}">
					<!-- 内容区域 -->
					<slot name="contentSlot">
						<!--
						 @slot@contentSlot 如果没有自定义区域 就显示默认的nav导航
						 @注意返回按钮 
						 如果textAlign === center 就要对返回按钮进行绝对定位 防止位置偏差
						 如果不是 start 就不需要绝对定位
						 -->
						<view class="wx-head-mod-nav-content-back" :style="{
						  display: isBackShow ? 'flex' : 'none',
						  position: textAlign === 'center' ? 'absolute' : ''
						}" @click="backEvent">
							<view class="wx-head-mod-nav-content-back-img">
								<image class="otmmb"
									:src="getImgSrc(backIcon || (backType == 1 ? defaultBlack : defaultWhite),true)"
									mode="widthFix">
								</image>
								<text v-if="backText" class="back-text"
									:style="{color: backTextColor, ...backStyle}">{{backText}}</text>
							</view>
						</view>
						<view class="wx-head-mod-nav-content-mian" :style="{
								width:navTextWidth,
								lineHeight:customHeight + 'rpx',
								paddingLeft:textPaddingLeft*scaleFactor+'rpx',
								fontSize:fontSize+'rpx',
								fontWeight:fontWeight,color:titleColor,
								justifyContent: textAlign,
								}">
							<text>{{textContent}}</text>
						</view>
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import {
		systemInfo
	} from '@/common/getSystem.js'
	import {
		getImgSrc
	} from '../../common/utils'
	export default {
		name: "HeadView",
		props: {
			/*文本区域位置 可选值为 flex-start：左  center：中*/
			textAlign: {
				type: String,
				default: 'center'
			},
			/*文本区内容*/
			textContent: {
				type: String,
				default: '标题'
			},
			/*文本区离左边的距离*/
			textPaddingLeft: {
				type: Number,
				default: 0
			},
			/*是否需要返回按钮*/
			isBackShow: {
				type: Boolean,
				default: false
			},
			// 自定义返回按钮
			backIcon: {
				type: String
			},
			// 点击返回按钮是否发送emit 如果想要点击按钮 执行自定义方法 必须传递emit 会发送 backFun 指令
			emit: {
				type: Boolean,
				default: false
			},
			// 自定义返回文本 不传递不渲染
			backText: {
				type: String,
				default: ''
			},
			// 返回字体的颜色
			backTextColor: {
				type: String,
				default: '#000000',
			},
			// 返回区域的样式
			backStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			/* 返回类型 2 白色返回键 1 灰色返回键 如果传递了backIcon 此参数失效 */
			backType: {
				type: Number,
				default: 2
			},
			/*文本区字体大小*/
			fontSize: {
				type: Number,
				default: 40
			},
			/*文本区字体粗细*/
			fontWeight: {
				type: Number,
				default: 0
			},
			/*文本区返回按钮图片宽*/
			backImageWidth: {
				type: Number,
				default: 12
			},
			/*文本区返回按钮图片高*/
			backImageHeight: {
				type: Number,
				default: 24 //px
			},
			// 导航栏整体背景颜色
			navBackgroundColor: {
				type: String,
				// default: '#2476F9'
			},
			// 导航栏整体附加样式
			navStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			/*标题字体颜色*/
			titleColor: {
				type: String,
				default: '#000000',
			},
		},
		computed: {
			/*文本区宽度*/
			navTextWidth() {
				if (this.textAlign === 'center') {
					return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) + 'rpx'
				} else {
					return this.menubarLeft + 'rpx'
				}
			},
		},
		data() {
			return {
				statusBarHeight: 0,
				/*状态栏高度*/
				navHeight: 0,
				/*头部导航栏总体高度*/
				navigationBarHeight: 0,
				/*导航栏高度*/
				customHeight: 0,
				/*胶囊高度*/
				scaleFactor: 0,
				/*比例系数*/
				menubarLeft: 0,
				/*胶囊定位的左边left*/
				windowWidth: 0,
				defaultBlack: '/static/my/back.png',
				/*返回图标 黑*/
				defaultWhite: '/static/tabbar/backWhite.png' /*返回图标 白*/
			};
		},
		methods: {
			getImgSrc,
			backEvent() {
				// 如果emit 为true 就发送backFun 事件,否则执行默认返回
				this.emit ? this.$emit('backFun') : this.$back()
			}
		},
		created() {
			/* 获取设备信息 */
			const SystemInfomations = systemInfo()
			/* 通用平台 */
			this.statusBarHeight = SystemInfomations.statusBarHeight //状态栏高度
			this.scaleFactor = SystemInfomations.scaleFactor //比例系数
			this.windowWidth = SystemInfomations.windowWidth //当前设备的屏幕宽度
			/* 微信小程序平台 */
			// #ifdef MP-WEIXIN
			this.navHeight = SystemInfomations.navHeight + SystemInfomations.statusBarHeight //头部导航栏总高度
			this.navigationBarHeight = SystemInfomations.navHeight //头部导航栏高度
			this.customHeight = SystemInfomations.menuButtonHeight //胶囊高度
			this.menubarLeft = SystemInfomations.menuButtonLeft //胶囊左边界距离左上角的距离
			// #endif

		}
	}
</script>

<style>
	.headBox {
		position: relative;
		z-index: 2;
	}

	.wx-head-mod {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.wx-head-mod-nav {
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		/* border: 1rpx solid red; */
		padding-left: 15rpx;
	}

	.wx-head-mod-nav-content {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		/* border: 1rpx solid red; */
	}

	/* 文本区 */
	.wx-head-mod-nav-content-mian {
		flex: 1;
		box-sizing: border-box;
		height: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		display: flex;
		align-items: center;
		/* border: 1rpx solid red; */
	}

	/* 返回按钮 */
	.wx-head-mod-nav-content-back {
		box-sizing: border-box;
		height: 100%;
		display: flex;
		align-items: center;
		/* position: absolute; */
		top: 0;
		left: 0;
		/* border: 1rpx solid red; */
	}

	.wx-head-mod-nav-content-back-img {
		box-sizing: border-box;
		min-width: 60rpx;
		/* width: 60rpx; */
		height: 60rpx;
		display: flex;
		align-items: center;
		/* border: 1rpx solid red; */
	}

	.otmmb {
		width: 60rpx;
		height: 60rpx;
		/* border: 1rpx solid red; */
	}

	.back-text {
		font-size: 24rpx;
	}
</style>